import React from 'react'
import ReactDOM from 'react-dom'

// 组件优化，避免没必要的组件更新
// 根组件
class App extends React.Component{
    state = {
        count: 0
    }

    handleClick = () => {
        this.setState(state => {
            return {
                count: state.count + 1
            }
        })
    }

    // 钩子函数
    shouldComponentUpdate(nextProps, nextState){
        // 返回false，阻止组件重新渲染
        // return false

        // nextState获取到最新的状态，this.state回去之前的状态
        // nextProps获取最新的props
        console.log("最新的state:",nextState)
        return true
    }

    render() {
        console.log("组件更新了")
        return (
            <div>
                <h1>计数器：{this.state.count}</h1>
                <button onClick={this.handleClick}>+1</button>
            </div>
        )
    }
}

ReactDOM.render(<App />, document.getElementById('root'))